<template>
	<view class="app-container">
		<u-cell-group :border="false" class="notice">
			<u-cell :border="false" icon="/static/icons/shouyi.svg">
				<view slot="title">
					<text class="text">可提现余额</text>
				</view>
				<view slot="value">
					<text class="value">{{ award }}</text>
				</view>
			</u-cell>
		</u-cell-group>
		<div class="tixian">
			<h4>提现金额</h4>
			<u-input placeholder="请输入需要提现金额" type="number" v-model="amount"></u-input>
			<h4>提现方式</h4>
			<u-radio-group class="tixian-way" placement="column" iconPlacement="right" v-model="payValue"
				@change="groupChange">
				<u-radio label="微信支付" class="weixin" name="0"></u-radio>
				<u-radio label="支付宝支付" class="zhifubao" name="1"></u-radio>
			</u-radio-group>
			<u-button text="确认提现" shape="circle" type="primary" @click="onClick" :disabled="amount<=0"></u-button>
		</div>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		withdraw,
		wechatPayment,
		aliPayment
	} from '@/api/api.js'
	export default {
		data() {
			return {
				amount: '',
				award: '',
				payValue: '0',
				apiFn: {
					0: wechatPayment,
					1: aliPayment
				}
			}
		},
		onNavigationBarButtonTap(btn) {
			switch (btn.index) {
				case 0:
					uni.navigateTo({
						url: '/pages/tixianrecord/tixianrecord'
					})
					break
			}
		},
		onLoad() {
			this.award = this.$store.state.user.award
		},
		methods: {
			groupChange(value) {},
			onClick() {
				const params = {
					payType: 'starsmoon',
					amount: this.amount,
					id: this.$store.state.user.id,
					award: this.award
				}
				withdraw(params).then(res => {
					if (res.code === 10000) {
						this.apiFn[this.payValue]({
							id: this.$store.state.user.id
						}).then(result => {
							if (result.code === 10000) {
								uni.navigateTo({
									url: '/pages/tixiansuccess/tixiansuccess'
								})
							}
						})
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: res.message,
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.notice {
		background-color: #fff;
		height: 58px;
		line-height: 58px;
		box-sizing: border-box;
		margin-bottom: 16px;

		.text {
			color: #00b6fc;
		}

		.value {
			font-size: 24px;
		}

		.u-cell-group__wrapper {
			height: 100%;
		}

		.u-cell__body {
			padding: 0 15px !important;
		}
	}

	.tixian-way {
		margin-bottom: 30px;

		.weixin {
			background: url('@/static/icons/weixin.svg') no-repeat;
		}

		.zhifubao {
			background: url('@/static/icons/zhifubao.svg') no-repeat;
		}

		.zhifubao,
		.weixin {
			padding-left: 28px;
			height: 44px;
			background-size: 16px 16px;
			background-position: 0 15px;
		}
	}
</style>
